var FG;
if (!FG)
    FG = {};

FG.ToolPanel = function(opts) {
    // 这个是ToolPanel接口形状的空架子
    this.addTab = function(tabName, opts) {};
    this.toggleTab = function(tabName) {};
};


FG.Sidebar2ToolPanel = function(opts) {
    // 使用leaflet的sidebar v2的ToolPanel
    var this_ = this;
    
    this._defaultTmplData = {
        "tabClass": "",
        "iconClass": "fa fa-cube",
        "paneClass": "",
        "paneContents": ""
    };
    this._tabTmpl = _.template(
        '<li class="<%= tabClass %>">' +
            '<a href="#<%= name %>_pane" role="tab" title="<%= zhName %>">' +
                '<i class="<%= iconClass %>"></i>' +
                '<span><%= zhName %></span>' +
            '</a>' +
        '</li>'
    );
    this._paneTmpl = _.template(
        '<div class="sidebar-pane" id="<%= name %>_pane">' +
            '<h1 class="sidebar-header"><%= zhName %><div class="sidebar-close"><i class="fa fa-angle-left"></i></div></h1>' +
            '<div class="tool_pane <%= paneClass %>"><%= paneContents %></div>' +
        '</div>'
    );
    
    this.map = opts.map;
    this.target = opts.target;

    this.$el = $('#' + this.target);
    this.tabNames = [];
    this.currentTabName = null;
    this.enterCallbacks = {};
    this.exitCallbacks = {};
    
    this.addTab = function(tabName, opts) {
        var $toolTabs = this.$el.find('.sidebar-tabs ul.tool_tabs');
        var $infoTabs = this.$el.find('.sidebar-tabs ul.info_tabs');
        
        var $tabs = opts.tabGroup !== 'tool' ? $infoTabs : $toolTabs,
            reverse = opts.tabGroup !== 'tool';
        
        var tmplData = _.clone(this._defaultTmplData);
        _.extend(tmplData, opts, {name: tabName});
        if (!_.has(tmplData, 'zhName')) {
            tmplData.zhName = tmplData.name;
        }
        
        var $li = $(this._tabTmpl(tmplData));
        if (_.has(tmplData, 'tabID')) {
            $li.attr('id', tmplData.tabID);
        }
        if (!_.has(tmplData, 'ordering')) {
            tmplData.ordering = 9999;
        }
        $li.attr('ordering', tmplData.ordering);

        // TODO: 真正的按ordering排序的实现.
        if (!!reverse) {
            $tabs.prepend($li);
        } else {
            $tabs.append($li);
        }
        
        var $content = this.$el.find('.sidebar-content'),
            $wrapPane = $(this._paneTmpl(tmplData)),
            $pane = $wrapPane.find('.tool_pane');
        
        if (_.has(tmplData, 'paneID')) {
            $pane.attr('id', tmplData.paneID);
        }
        $content.append($wrapPane);
        this.tabNames.push(tabName);
        if (!!opts.enter) { this.enterCallbacks[tabName] = opts.enter }
        if (!!opts.exit) { this.exitCallbacks[tabName] = opts.exit }
        this._loadSidebar();

        return {'tab': $li, 'pane': $pane}
    };
    
    this.toggleTab = function(tabName) {
        if (!tabName) {
            if (!!this.defaultTabName) {
                tabName = this.defaultTabName
            } else {
                tabName = this.tabNames[0];  // todo: 尚不完善.
            }
        }
        if (!this.sidebar) {
            this._loadSidebar({open: tabName});
        } else {
            this.sidebar.open(tabName+'_pane');
        }
    };
    
    this._loadSidebar = _.debounce(function(opts) {
        if (!!this_.sidebar) {
            this_.sidebar.removeFrom(this_.map);
        }
        this_.sidebar = L.control.sidebar(this_.target).addTo(this_.map);
        // sidebar切换
        this_.sidebar.on('content', function(e) {
            var tabName = e.id.replace(/_pane$/, '');
            this_._tabToggled(tabName);
        });
        if (!!opts && !!opts.open) {
            this_.sidebar.open(opts.open+'_pane');
        }
    }, 1000);

    this._tabToggled = function(tabName) {
        // TODO
        if (tabName === this.currentTabName) {
            return;
        }
        var enter = this.enterCallbacks[tabName],
            exit  = this.exitCallbacks[this.currentTabName];
        this.currentTabName = tabName;
        if (!!exit) { exit() }
        if (!!enter) { enter() }
        // DX.shout('sidebar:switched', tabName);
    };

    this.setDefaultTab = function(tabName) {
        this.defaultTabName = tabName
    };
    
    this._loadSidebar();

};

